<template>
  <!-- 所有标签都必须写在一个div中-->
  <div id="container">
    <el-row>
        <h1><i class="el-icon-eleme"></i>{{sysname}}</h1>
    </el-row>
    <el-row>
      <el-button type="primary" @click="toadd" icon="el-icon-search">添加</el-button>
    </el-row>
    <el-row>

      <el-table :data="list" style="width: 100%;">

          <el-table-column prop="title" label="标题" header-align="center" width="280" />
          <el-table-column prop="sellpoint" label="卖点" header-align="center" width="200" />
          <el-table-column prop="price" label="价格" align="right"  header-align="center" width="100"/>
          <el-table-column prop="intro" label="说明"  header-align="center" />
          <el-table-column label="[操作]"  width="220" header-align="center">
            <template slot-scope="s">
                <el-button type="success" @click="toupdate(s.$index, s.row)" icon="el-icon-check">修改</el-button>
                <el-button type="danger" @click="del(s.$index)" icon="el-icon-close">删除</el-button>
              </template>
            </el-table-column>
      </el-table>
    </el-row>


  <el-dialog title="提示"  :visible.sync="dialogVisible" width="30%">

    <span>
      <el-form :model="m" label-width="80px">
        <el-form-item label="标题">
          <el-input v-model="m.title" />
        </el-form-item>
        <el-form-item label="卖点">
          <el-input v-model="m.sellpoint" />
        </el-form-item>
        <el-form-item label="价格">
          <el-input v-model="m.price" />
        </el-form-item>
        <el-form-item label="说明">
          <el-input type="textarea" v-model="m.intro"  />
        </el-form-item>
      </el-form>
    </span>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible=false">取消</el-button>
       <el-button @click="save">确定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
  //这个数据区只允许本组件使用
  export default{
    name:"Item",
    data(){
      return{
        sysname:"京东电商平台",
        dialogVisible:true,
        isupdate:false,
        index:null,
        //临时存放一条数据model
        m:{
          title:'',
          sellpoint:'',
          price:'',
          instro:''
        },
        list:[
          {title:"大话Java：程序设计从入门到精通",sellpoint:"孙卫琴",price:"40.0",intro:"跟着孙悟空学Java，从此告别枯燥的技术学习。基于JDK9版本讲解Java编程思想、架构、代码管理等，全面了解Java编程的基本技术，32节同步讲解视频课程。" },
          {title:"ava从入门到精通（第5版）",sellpoint:"孙卫琴",price:"55.20",intro:"297个应用实例+37个典型应用+30小时教学视频+海量开发资源库，丛书累计销量200多万册团购热线010-89113777"},
          {title:"Java编程思想（第4版） [thinking in java]",sellpoint:"Bruce Eckel",price:" 79.20",intro:"Java学习必读经典,殿堂级著作！赢得了全球程序员的广泛赞誉 团购热线010-89113777"},
           {title:"Java核心技术 卷I 基础知识（原书第11版）",sellpoint:"凯•S.霍斯特曼",price:"109.30",intro:"CoreJava第11版，Jolt大奖获奖作品，与Java编程思想、EffectiveJava、深入理解Java虚拟机堪称：Java四大名著" }


          ]
          }
    },
    methods: {
      toadd:function(){
        this.m={}
        //要调用数据区中数据 要添加this
        this.dialogVisible=true
        this.isupdate=false
      },
      toupdate:function(index,row){
        //获取当前数据，回显
        this.m =JSON.parse(JSON.stringify(row))
        this.isupdate=true
        this.dialogVisible=true
        this.index=index
      },
      save:function(){
        if(!this.isupdate){
          this.list.splice(0,0,this.m)
        }else{
        this.list.splice(this.index,1,this.m)
      }this.dialogVisible=false
      },
      del:function(index){
        //删除指定数组的索引值删除1个
       this.list.splice(index,1)
      }
    }
  }
</script>

<style>
  textarea{
    font-family:"微软雅黑"
  }
</style>
